<template>
  <div class="user_page">
    <!--  管理员主页  -->
    <el-container>
      <el-aside width="200px" style="background: #ffffff">
        <el-row class="tac">
          <el-col :span="20">



            <el-menu
                default-active="0"
                class="el-menu-vertical-demo"
                 >

              <el-menu-item index="0" @click="memberRouter('/admin/page/member')">
                <i class="el-icon-location"></i>
                <span slot="title">管理员信息概述</span>
              </el-menu-item>

              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>管理员介绍</span>
                </template>
                  <el-menu-item v-for="item of memberList" :key="item._id"
                                @click="memberRouter(`/admin/page/memberinfo/${item.id}`)"
                    :index="`1-${item._id}`">
                    {{item.nickname}}
                  </el-menu-item>
              </el-submenu>

              <el-menu-item index="2"  @click="memberRouter('/admin/page/usermanage')">
                <i class="el-icon-user-solid"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>

              <el-menu-item index="3"  @click="memberRouter('/admin/page/lunbomanage')">
                <i class="el-icon-s-platform"></i>
                <span slot="title">轮播图管理</span>
              </el-menu-item>

              <el-menu-item index="4"  @click="memberRouter('/admin/page/bookmanage')">
                <i class="iconfont">&#xf00a1;</i>
                <span slot="title">图书管理</span>
              </el-menu-item>


              <el-menu-item index="5"  @click="memberRouter('/admin/page/membermyself')">
                <i class="el-icon-s-tools"></i>
                <span slot="title">信息修改</span>
              </el-menu-item>


              <el-menu-item index="6"
                @click="memberRouter('/admin/page/memberpro')">
                <i class="el-icon-more"></i>
                <span slot="title">项目信息</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>



      </el-aside>
      <el-container>
        <el-header>
          <div class="container_head">
            <h4 class="container_title">众众管理系统</h4>
            <div class="container_user">
              <img :src="currentMember.userPortrait?currentMember.userPortrait:'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/my_self/image/head-girl.jpg'" />
              <div class="sign_out" @click="signOut">退出登录</div>
            </div>

          </div>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
        <el-footer>
          <admin-footer/>
        </el-footer>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import AdminFooter from "./item/adminFooter";
import { adminAll , selectByUsername } from "@/network/admin";
export default {
  name: "userPage",
  components: {AdminFooter},
  data(){
    return{
      memberList:[],
      currentMember:{
        adminIcon:"https://bucket-yufei.oss-cn-beijing.aliyuncs.com/my_self/image/head-girl.jpg"
      },
      usernameToken:"",
    }
  },
  methods: {
    signOut(){//退出登录
      window.sessionStorage.removeItem('currentUsername');
      window.localStorage.removeItem('token');
      this.$router.push("/");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //路由跳转
    memberRouter(url){
      // console.log(url);
      this.$router.push(url);
    }
  },
  created() {
    const usernameToken=window.localStorage.getItem('token')
    this.usernameToken=usernameToken
    console.log(this.usernameToken);
    adminAll().then((result)=>{
      console.log(result)
      this.memberList=result.data.data;
    }).catch((reason)=>{
      console.log(reason);
    });
    selectByUsername(this.usernameToken).then((result)=>{
      console.log(result);
      this.currentMember=result.data.data;
    }).catch((reason)=>{
      console.log(reason);
    })
  }
}
</script>

<style scoped>
.user_page{
  background: #ffffff;
}
.iconfont {/*定义字体颜色*/
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 10px;
}
.el-menu-vertical-demo{
  width: 200px;
  overflow: hidden;
  position: fixed;
  top: 0;
}
.container_title{
  font-family: 苏新诗柳楷简;
  font-size: 25px;
  color: #ffffff;
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-header{
  /*background: linear-gradient(to left, lightcoral, #8CA3D7);*/
  background-image: linear-gradient( -135deg, #ABDCFF 10%, #0396FF 100%);
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}


.container_head{
  display: flex;
  justify-content: space-between;
}

.container_user{
  position: relative;
  width: 100px;
  height: 60px;
}
.container_user:hover .sign_out{
  display: block;
}
.container_user img{
  margin-top: 5px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: all 400ms;
}
.container_user img:hover{
  transform: rotate(360deg);
}

.sign_out{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 10;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

</style>
